<template>
  <div class="statistics-content statistics-1">
    <div class="grid grid-left">
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道注册人数" style="margin-top: 10px"></BlockItem>
<!--        <div class="tab-block">-->
<!--          <div :class="chart1Active==1?'active':''" @click="chart1Active=1" class="tab">月</div>-->
<!--          <div :class="chart1Active==2?'active':''" @click="chart1Active=2" class="tab">周</div>-->
<!--          <div :class="chart1Active==3?'active':''" @click="chart1Active=3" class="tab">日</div>-->
<!--        </div>-->
        <div class="chart" id="chart1"></div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道访问人数" style="margin-top: 10px"></BlockItem>
<!--        <div class="tab-block">-->
<!--          <div :class="chart2Active==1?'active':''" @click="chart2Active=1" class="tab">月</div>-->
<!--          <div :class="chart2Active==2?'active':''" @click="chart2Active=2" class="tab">周</div>-->
<!--          <div :class="chart2Active==3?'active':''" @click="chart2Active=3" class="tab">日</div>-->
<!--        </div>-->
        <div class="chart" id="chart2"></div>
      </div>
    </div>
    <div class="grid grid-center">
      <div class="map-block" style="position: relative">
        <div class="number-block" style="position: relative;z-index: 1">
          <NumberItem class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :icon="item.icon"
                      @click.native="oncloseDialog1(item.id,item.name)"
          ></NumberItem>
        </div>
<!--        <CoverOne v-if="closeDialog" :id="fatherId" :closeDialog="close" :countList="countList"></CoverOne>-->
        <div id="map"></div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道访问量趋势" style="margin-top: 10px"></BlockItem>
        <div class="chart" id="chart3"></div>
      </div>
    </div>
    <div class="grid grid-right">
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道注册人数、注册企业占比" style="margin-top: 10px"></BlockItem>
        <div class="tab-block">
          <div class="tab1" @click="derive">
            <img src="/static/export.png" alt="" class="export">导出</div>
        </div>
        <div class="info-item">

          <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
            <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
              <div id="scrollItemBox">

          <div class="info-list" v-for="(item,index) in list" :key="item.id">
            <div style="display: flex;align-items: center;">
              <div class="sort">0{{index+1}}</div>
              <div class="name">{{item.areaName}}</div>
<!--              <img src="/static/upper.png" alt="" class="rise" v-if="item.state==1">-->
<!--              <img src="/static/below.png" alt="" class="rise" v-else>-->
            </div></div></div>
              <div class="line"></div>
              <div class="percentage-item">
                <div class="percentage">{{item.zhucerenshuzhanbi}}</div>
                <div class="percentage">注册人数占比</div>
              </div>
              <div class="line"></div>
              <div class="percentage-item">
                <div class="percentage">{{item.zhuceqiyezhanbi}}</div>
                <div class="percentage">注册企业占比</div>
              </div>
            </div>
            <div class="count1" v-if="index==0">{{item.zongfen}}</div>
            <div class="count2" v-else-if="index==1">{{item.zongfen}}</div>
            <div class="count3" v-else-if="index==2">{{item.zongfen}}</div>
            <div class="count" v-else>{{item.zongfen}}</div>
          </div>
        </div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="各乡镇街道岗位总数统计" style="margin-top: 10px"></BlockItem>
<!--        <div class="tab-block">-->
<!--          <div :class="chart5Active==1?'active':''" @click="chart5Active=1" class="tab">月</div>-->
<!--          <div :class="chart5Active==2?'active':''" @click="chart5Active=2" class="tab">周</div>-->
<!--          <div :class="chart5Active==3?'active':''" @click="chart5Active=3" class="tab">日</div>-->
<!--        </div>-->
        <div class="chart" id="chart5"></div>
      </div>
    </div>
    <Cover4  v-if="closeDialog1" :id="fatherId" :type="fairActive" :closeDialog="close" :name="name"></Cover4>
    <CoverCom4  v-if="closeDialog3" :id="fatherId" :closeDialog3="close3" :title="title"></CoverCom4>
    <CoverJob4  v-if="closeDialog2" :id="fatherId" :closeDialog2="close2" :title="title"></CoverJob4>
    <CoverJob5  v-if="closeDialog4" :id="fatherId" :closeDialog4="close4" :title="title"></CoverJob5>
    <Modal v-if="showMore" @closeModal="showMore=false" :title="title" :name="this.name" width="1200px" height="400px">
      <MapCount :title="title" :countList="countList"></MapCount>
    </Modal>
  </div>
</template>

<script>
import Cover4 from "@/components/Cover/Cover-4.vue";
import CoverCom4 from "@/components/Cover/CoverCom-4.vue";
import CoverJob4 from "@/components/Cover/CoverJob-4.vue";
import CoverJob5 from "@/components/Cover/CoverJob-5.vue";
import NumberItem from "@/components/NumbeItem/NumberItem.vue";
import {getExport, getSelectCount, getSelectTrendOfVisits} from "@/api/statistics-3";
import BlockItem from "@/components/BlockItem/BlockItem";
import Modal from "@/components/Modal/Modal";
import MapCount from "@/components/MapCount/MapCount";
import CoverOne from "@/components/Cover/CoverOne.vue";
import {createFile} from "@/utils/utils";
import {getRegistrationRatioApi} from "@/api/statistics4";

export default {
  name: "Statistics4",
  components: {MapCount, NumberItem,BlockItem,Modal,CoverOne,
    Cover4,
    CoverCom4,
    CoverJob4,
    CoverJob5,},
  data(){
    return{
      closeDialog1: false,
      closeDialog3: false,
      closeDialog2: false,
      closeDialog4: false,
      fairActive:1,
      fatherId: 0,
      title:'',
      moreType:1,
      showMore:false,
      chart1Active:1,
      chart2Active:1,
      chart3Active:1,
      chart4Active:1,
      chart5Active:1,
      countList:[],
      numberData:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:3},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:51},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:1},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:1},
      ],
      list:[{
        id:1,
        areaName:'宁远镇',
        zhucerenshuzhanbi:'100%',
        zhuceqiyezhanbi:'100%',
        zongfen:100.0,
      },{
        id:2,
        areaName:'巉口镇',
        zhucerenshuzhanbi:'100%',
        zhuceqiyezhanbi:'100%',
        zongfen:100.0,
      },{
        id:3,
        areaName:'杏园乡',
        zhucerenshuzhanbi:'96.3%',
        zhuceqiyezhanbi:'100%',
        zongfen:98.0,
      },{
        id:4,
        areaName:'高峰乡',
        zhucerenshuzhanbi:'93%',
        zhuceqiyezhanbi:'100%',
        zongfen:96.0,
      },{
        id:5,
        areaName:'白碌乡',
        zhucerenshuzhanbi:'85%',
        zhuceqiyezhanbi:'100%',
        zongfen:94.0,
      },{
        id:6,
        areaName:'福台路街道',
        zhucerenshuzhanbi:'84%',
        zhuceqiyezhanbi:'100%',
        zongfen:92.0,
      },]
    }
  },
  methods: {
    oncloseDialog1(e,name)
    {
      this.type = e
      // this.closeDialog1 = true
      if(this.type ==2){
        this.closeDialog1 = true
        this.fatherId = e
        this.fairActive = e
        this.name=name
      }
      if(this.type ==3){
        this.closeDialog1 = false
      }
      if(this.type ==4){
        this.closeDialog3 = true
        this.fatherId = e
        this.title=name
      }
      if(this.type ==5){
        this.closeDialog2 = true
        this.fatherId = e
        this.title='岗位总数'
      }
      if(this.type ==6){
        this.closeDialog4 = true
        this.fatherId = e
        this.title='匹配成功数'
      }
    },
    close3(){
      this.closeDialog3 = false
    },
    close2(){
      this.closeDialog2 = false
    },
    close(){
      this.closeDialog1 = false
    },
    close4(){
      this.closeDialog4 = false
    },
    derive(){
      this.$confirm('确定导出当前数据吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getExport().then((res)=>{
            if(!createFile(res,'推广应用情况统计表')){
              this.$message.error('未知的文件格式');
            }
        }).catch(err => {
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    getDetail(){
      getRegistrationRatioApi().then((res)=>{
        if(res.code===200){
          this.list=res.data
        }
      })
    },
    getCount(){
      getSelectCount().then((res)=>{
        if(res.code===200){
          this.numberData[0].number=res.data.customerCount
          this.numberData[1].number=res.data.browseCount
          this.numberData[2].number=res.data.enterpriseCount
          this.numberData[3].number=res.data.jobCount
          this.numberData[4].number=res.data.deliveryCount
        }
      })
    },
    mEnter() {
      clearInterval(this.timer);
    },
    // 鼠标移出继续滚动
    mLeave() {
      this.startScroll()
    },
    initScroll() {
      this.$nextTick(() => {
        this.startScroll()
      })
    },
    // 开始滚动
    startScroll() {
      this.timer = setInterval(this.scroll, 35);
    },
    // 滚动处理方法
    scroll() {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = document.getElementById("scrollItemBox").offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },
    initChart1(){
      let charts = this.$echarts.init(document.getElementById('chart1'));
      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        xAxis: {
          type: 'category',
          data: ['宁远镇','巉口镇','杏园乡','高峰乡','石泉乡','白碌乡','福台路街道','中华路街道','永定路街道',],
          axisTick:{
            show:false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:20,
          left:60,
          right:10,
          bottom:40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine:{
            show:true,
          },
          axisTick:{
            show:true,
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            // data: getNum(7,30000,10000),
            data:[35,5,27,23,7,54,35,47,84],
            type: 'bar',
            barWidth:17,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#ccc',
                    fontSize:14
                  }
                },
                barBorderRadius:[15, 15, 0, 0],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#f7f28e'
                },{
                  offset:1,
                  color:'#3ee3a9'
                }])
              }
            }
          }
        ]
      }
      // getSelectCount().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     this.countList = data;
      //     option.series[0].data=data.registerCounts;
          charts.hideLoading();
          charts.setOption(option)
        // }
      // })
    },
    initChart2(){
      let charts = this.$echarts.init(document.getElementById('chart2'));
      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['宁远镇','巉口镇','杏园乡','高峰乡','石泉乡','白碌乡','福台路街道','中华路街道','永定路街道',],
          axisTick:{
            show:false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        grid:{
          top:20,
          left:60,
          right:10,
          bottom:40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine:{
            show:true,
          },
          axisTick:{
            show:true,
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            // data: getNum(7,40000,15000),
            data:[51,52,18,53,57,26,22,31,19],
            type: 'bar',
            barWidth:17,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#ccc',
                    fontSize:14
                  }
                },
                barBorderRadius:[15, 15, 0, 0],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#fb848f'
                },{
                  offset:1,
                  color:'#f7c659'
                }])
              }
            }
          }
        ]
      }
      // getSelectCount().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data=data.accessCounts;
          charts.hideLoading();
          charts.setOption(option)
        // }
      // })
    },
    initChart3(){
      let charts = this.$echarts.init(document.getElementById('chart3'));
      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        legend:{
          textStyle:{
            color:'#fff'
          },
          right:10,
          top:0
        },
        xAxis: {
          type: 'category',
          data: ['00:00','01:00','02:00','003:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
          axisTick:{
            show:false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
           // rotate:30,
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:20,
          left:50,
          right:10,
          bottom:40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine:{
            show:true,
          },
          axisTick:{
            show:true,
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            // data: getNum(12,3000,2500),
            data:[0,1,0,0,0,0,2,1,3,3,5,6,7,3,5,2,5,5,2,2,3,1,5,0,0,0,0,0,0],
            type: 'line',
            name:'宁远镇',
            smooth:true,
            showSymbol:false,
            symbol: 'circle',
          }
          ,{
            // data: getNum(12,2700,2200),
            data:[0,1,0,0,0,0,2,1,3,3,5,6,3,3,5,2,5,5,2,2,3,1,5,3,0,0,5,10,],

            name:'巉口镇',
            type: 'line',
            showSymbol:false,
            symbol: 'circle',
            smooth:true,
          },{
            // data: getNum(12,2600,2100),
            data:[1,11,5,0,0,0,2,1,3,3,7,2,3,9,5,2,5,8,2,2,3,8,5,3,0,0,5,2,],

            name:'杏园乡',
            type: 'line',
            showSymbol:false,
            symbol: 'circle',
            smooth:true,
          },{
            // data: getNum(12,2300,1750),
            data:[1,11,5,0,0,0,2,1,3,3,7,2,3,9,5,2,5,8,2,2,3,8,5,3,0,0,5,2,],

            name:'高峰乡',
            type: 'line',
            showSymbol:false,
            symbol: 'circle',
            smooth:true,
          },{
            // data: getNum(12,2400,1800),
            data:[1,11,5,0,0,0,2,1,3,3,7,2,3,9,5,2,5,8,2,2,3,8,5,3,0,0,5,2,],

            name:'符家川镇',
            type: 'line',
            showSymbol:false,
            symbol: 'circle',
            smooth:true,
          },{
            // data: getNum(12,1400,900),
            data:[1,7,5,0,0,0,2,1,3,3,7,9,3,9,5,2,5,7,2,2,3,5,5,3,3,5,2,],


            name:'中华路街道',
            type: 'line',
            showSymbol:false,
            symbol: 'circle',
            smooth:true,
          },{
            // data: getNum(12,1300,900),
            data:[3,6,5,0,10,0,2,1,3,5,7,2,3,9,15,2,5,8,2,2,3,8,8,3,0,0,5,2,],

            name:'永定路街道',
            type: 'line',
            showSymbol:false,
            symbol: 'circle',
            smooth:true,
            barCategoryGap: '30%',
            barGap:'100%',
          }
        ]
      }
      // getSelectTrendOfVisits().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data=data[0];
      //     option.series[1].data=data[1];
      //     option.series[4].data=data[2];
      //     option.series[3].data=data[3];
      //     option.series[2].data=data[4];
      //     option.series[5].data=data[5];
      //     option.series[6].data=data[6];
          charts.hideLoading();
          charts.setOption(option)
        // }
      // })

    },
    initChart5(){
      let charts = this.$echarts.init(document.getElementById('chart5'));
      // charts.showLoading({
      //   text:'加载中',
      //   textColor:'#fff',
      //   maskColor:'rgba(0,0,0,0)'
      // })
      let option = {
        xAxis: {
          type: 'category',
          data: ['宁远镇','巉口镇','杏园乡','高峰乡','石泉乡','白碌乡','福台路街道','中华路街道','永定路街道',],
          axisTick:{
            show:false
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:20,
          left:60,
          right:10,
          bottom:40
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine:{
            show:true,
          },
          axisTick:{
            show:true,
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            // data: getNum(7,8000,3000),
            data:[69,15,30,14,57,54,12,11,19],
            type: 'bar',
            barWidth:17,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#ccc',
                    fontSize:14
                  }
                },
                barBorderRadius:[15, 15, 0, 0],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#0db5e6'
                },{
                  offset:1,
                  color:'#12f0b8'
                }])
              }
            }
          }
        ]
      }
      // getSelectCount().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.series[0].data=data.publishCounts;

          charts.hideLoading();
          charts.setOption(option)
        // }
      // })
    },
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/adq_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          // visualMap: {
          //   left: 'right',
          //   top: 'bottom',
          //   max:1000,
          //   inRange: {
          //     color: [
          //       'rgba(17,74,112,0.2)',
          //       '#46a9ff',
          //     ]
          //   },
          //   textStyle: {
          //     color: "#fff"
          //   },
          //   calculable: true
          // },
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series:[
            {
              map: "jqsMap",
              center:[104.62577,35.579764],
              zoom:1.3,
              type:'map',
              top:150,
              data:[],
              width:410,
              label: {
                show: true,
                fontSize: "12",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "12",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select:{
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "12",
                  color: "#fff"
                }
              }
            }
          ]
        }
        myCharts.on('click',(e)=>{
          if(e.componentSubType=='map'){
            this.title=e.data.name
            this.moreType=2;
            this.showMore=true;
          }
        })
        myCharts.setOption(option)
      })
    },

  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.initMap();
    this.initChart1()
    this.initChart2()
    this.initChart3()
    this.initChart5()
    // this.getCount()
    // this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 2px solid #05548A;
.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 140px);
  padding: 0 10px;
  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    //box-shadow: $boxshadow;
    border-radius: 10px;
    background: #0A1456;
    .tab-block{
      position: absolute;
      top: 17px;
      right: 20px;
      display: flex;
      align-items: center;
      height: 30px;
      z-index: 3;
      .tab:first-child{
        border-radius: 5px 0 0 5px;
      }
      .tab:last-child{
        border-radius: 0 5px 5px 0;
      }
      .tab1{
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #46A9FF;
        font-size: 14px;
        border-radius: 30px;
        .export{
          width: 12px;
          margin-right: 5px;
        }
      }
      .tab{
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #46a9ff;
        font-size: 14px;

      }
      .tab.active{
        background: #46a9ff;
      }
    }
  }
}

.statistics-content {
  display: flex;
  flex-direction: row;

  .grid {
    height: 100%;
  }

  .grid.grid-left,.grid.grid-right {
    width: calc(100%/4);
    .info-item{
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
     // overflow: hidden;
      .info-list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #025A8B;
        margin-bottom: 12px;
        .sort{
          color: #ffffff;
          margin-left: 10px;
          font-size: 16px;
          width: 50px;
          height: 100%;
          background: url("/static/u6817.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .name{
          color: #ffffff;
          font-size: 15px;
          width: 60px;
          margin-right: 13px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .rise{
          width: 16px;
          height: 18px;
        }
        .line{
          color: #ffffff;
          width: 2px;
          height: 16px;
          border-radius: 10px;
          background-image: linear-gradient(#115F8D, #fff,#115F8D);
          margin: 0 10px;
        }
        .percentage-item{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 2px;
          .percentage{
            color: #ffffff;
            font-size: 9px;
          }
        }
        .count{
          color: #ffffff;
          width: 52px;
          height: 100%;
          background-image: url("/static/top3.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .count1{
          color: #ffffff;
          width: 50px;
          height: 100%;
          background-image: url("/static/top4.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .count2{
          color: #ffffff;
          width: 50px;
          height: 100%;
          background-image: url("/static/top1.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .count3{
           color: #ffffff;
           width: 50px;
           height: 100%;
           background-image: url("/static/top2.png");
           background-size: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
         }

      }
    }
  }
  .grid.grid-center{
    width: calc(100%/2);
    padding:0 20px;
    .statistics-block{
      width: 100%;
      height: calc(100%/3 - 20px);
      margin-top: 20px;
    }
  }
  .statistics-block{
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 20px;
    .chart{
      width: 100%;
      height: calc(100% - 30px);
    }
  }
  .statistics-block:last-child{
    margin-bottom: 0;
  }
  .map-block{
    width: 100%;
    height: calc(100%/3*2);
    position: relative;
    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      .number-item{
        width: calc((100% - 90px)/4);
        margin-right: 30px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
<style lang="scss" scoped>


.scroll_parent_box {
  height: 380px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;
}

.scroll_list {
  overflow: hidden;
  transition: all 0ms ease-in 0s
}

.scroll_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
</style>
